<template>
	<view class="warp">
		<view class="uni-margin-wrap uni-margin-wrap-back">
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-header" v-if="check.isNull(imgeUrl) == true">
					<image class="image" :src="'/static/mine/update_icon_back.png'" mode="scaleToFill" :style="{ height: height + 'px', width: width + 'px' }"></image>
				</view>
				<view class="uni-item-view-base uni-item-view-header" v-if="check.isNull(imgeUrl) == false">
					<view class="user-head"><image class="image1" :src="imgeUrl" mode="scaleToFill"></image></view>
				</view>
			</view>
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-item" @click="headClick()">
					<view class="uni-item-view-item-btn"><text class="text">从手机相册选择一张</text></view>
				</view>
			</view>
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-item" @click="headClick()">
					<view class="uni-item-view-item-btn"><text class="text">拍照上传</text></view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
// import { pathToBase64, base64ToPath } from 'image-tools'
// import aes_utils from '@/js_sdk/aesutils/aes_utils.js'
import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js';
export default {
	data() {
		return {
			imgeUrl: '',
			height: 0,
			width: 0,
		};
	},
	onLoad(option) {
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
		const sys = uni.getSystemInfoSync();
		this.width = sys.windowWidth * 0.37;
		this.height = this.width * 1.38;
	},

	methods: {
		headClick() {
			uni.chooseImage({
				sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: res => {
					this.$refs.loadingCover.show();
					var data = {};
					this.upload.sendRequest({
						api: this.api.common.uploadImageApi,
						data: data,
						imageData: res,
						success: res => {
							console.log(res);
							if (res.success == 'true' && res.data) {
								this.imgeUrl = res.data.url;
								this.uploadHeadIconData();
							}else{
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							}
						},
						fail: res => {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
					// this.imageData = res;
					// this.imageList = this.imageList.concat(res.tempFilePaths); //成功后利用concat方法追加到imageList中
					//循环遍历res.tempFilePaths将每一个图像路径转换为base64
					// for (var i = 0; i < res.tempFilePaths.length; i++) {
					// pathToBase64(res.tempFilePaths[0])

					// 	.then(path => {
					// 		console.log(path);
					// 		this.baseImageList = this.baseImageList.concat(path); //成功后利用concat方法追加到baseImageList中
					// var data = {};
					// this.upload.sendRequest({
					// 	api: this.api.common.uploadImageApi,
					// 	data: data,
					// 	imageData: res,
					// 	imageBase:path,
					// 	success: res => {
					// 		console.log(res);
					// 		if (res.success == 'true' && res.data) {
					// 			this.imgeUrl = res.data.url;
					// 		}
					// 	},
					// 	fail: res => {}
					// });
					// 	})
					// 	.catch(error => {
					// 		console.error(error);
					// 	});
					// }
				}
			});
		},

		uploadHeadIconData() {
			var data = {
				avatar: this.imgeUrl,
			};
			this.http.sendRequest({
				api: this.api.mine.mineUsersAvatarApi,
				data: data,
				success: res => {
					if (res.success == 'true' && res.data) {
					 getApp().globalData.userInfo.avatar = this.imgeUrl;
						uni.showModal({
							content: '头像更新成功！',
							showCancel: false
						})
					}else{
						this.imgeUrl = '';
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					this.imgeUrl = '';
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.user-head {
	box-sizing: content-box;
	width: 280rpx;
	height: 280rpx;
	border: 3px solid green;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 196rpx;
		height: 196rpx;
	}
}
.uni-item-view {
	width: 100%;
	// margin-top: 16rpx;
	background-color: #fff;
	padding-top: 48rpx;
	padding-bottom: 16rpx;
	.uni-item-view-base {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx 16rpx 24rpx;
		// background-color: $uni-bg-color-grey;
	}

	.uni-item-view-header {
		// width: 100%;
		justify-content: center;
		padding-bottom: 16rpx;
		.image {
			width: 100%;
			// height: 300rpx;
		}
	}

	.uni-item-view-item-btn {
		width: 100%;
		margin-left: 48rpx;
		margin-right: 48rpx;
		height: 90rpx;
		border-radius: 6rpx;
		border: 1rpx solid $uni-border-color-primary;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.text {
			color: #333;
		}
	}
}
</style>
